import React from 'react'
import { Switch, Route, Redirect } from "react-router-dom"
import "./Index.css"
import { Link } from "react-router-dom"
import home_selected from "../../assets/img/home_selected.png"
import home_unselected from "../../assets/img/home_unselected.png"
import cate_selected from "../../assets/img/cate_selected.png"
import cate_unselected from "../../assets/img/cate_unselected.png"
import shop_selected from "../../assets/img/shop_selected.png"
import shop_unselected from "../../assets/img/shop_unselected.png"
import user_selected from "../../assets/img/user_selected.png"
import user_unselected from "../../assets/img/user_unselected.png"
let Home = React.lazy(() => import("../Home/Home"))
let List = React.lazy(() => import("../List/List"))
let Shop = React.lazy(() => import("../Shop/Shop"))
let Wode = React.lazy(() => import("../Wode/Wode"))


export default function Index() {
    return (
        <div>
            <React.Suspense fallback={<div>加载中。。。</div>}>
                <Switch>
                    <Route path="/index/home" component={Home}></Route>
                    <Route path="/index/list" component={List}></Route>
                    <Route path="/index/shop" component={Shop}></Route>
                    <Route path="/index/wode" component={Wode}></Route>
                </Switch>
            </React.Suspense>
            <div id="index">
                <div id="kong"></div>
                <div className="index">
                    <ul>
                        <Link to="/index/home">
                            <img src={home_unselected} alt="" />
                            <p>商城</p>
                        </Link>
                        <Link to="/index/list">
                            <img src={cate_unselected} alt="" />
                            <p>分类</p>
                        </Link>
                        <Link to="/index/shop">
                            <img src={shop_unselected} alt="" />
                            <p>购物车</p>
                        </Link>
                        <Link to="/index/wode">
                            <img src={user_unselected} alt="" />
                            <p>我的</p>
                        </Link>
                    </ul>
                </div>
            </div>
        </div>

    )
}
